<template>
  <div>
    <el-form class="msg-info inline-form"
             :model="msgInfo"
             :rules="msgInfoRules"
             :label-width="labelWidth"
             ref="msgInfo"
             id="msgInfo">
      <el-form-item label="活动标题"
                    prop="title">
        <el-input v-model="msgInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="活动名称"
                    prop="name">
        <el-input v-model="msgInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="活动标识">
        <el-input v-model="msgInfo.identifier"></el-input>
      </el-form-item>
      <el-form-item label="问卷调查说明"
                    v-if="questionnaireContentFlag">
        <el-input class="content"
                  type="textarea"
                  placeholder="请输入内容问卷调查说明"
                  v-model="msgInfo.prizeState"
                  maxlength="80"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  :show-word-limit="showWordLimit"></el-input>
      </el-form-item>
      <el-form-item label="活动说明">
        <quill-editor style="width: 600px;"
                      ref="myTextEditor"
                      @change="showChange($event)"
                      v-model="msgInfo.description"
                      :options="editorOption"></quill-editor>
        <el-input type="hidden"
                  v-model="msgInfo.description"></el-input>
      </el-form-item>
      <template v-if="guessContentFlag">
        <el-form-item label="竞猜PK说明">
          <el-input class="content"
                    type="textarea"
                    placeholder="请输入竞猜PK说明"
                    v-model="guessInfo.content"
                    maxlength="80"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    :show-word-limit="showWordLimit"></el-input>
        </el-form-item>
        <el-form-item label="初始显示积分">
          <el-input-number v-model="guessInfo.baseIntegral"
                           :min="0"
                           :step="100"
                           step-strictly></el-input-number>
          <span style="margin-left: 10px;">分</span>
        </el-form-item>
        <el-form-item label="平台抽成比例">
          <el-input-number v-model="guessInfo.platformPercent"
                           :min="0"
                           :max="100"
                           type="number"
                           :controls="false"></el-input-number>
          <span style="margin-left: 10px;">%</span>
        </el-form-item>
      </template>
      <template v-if="tournamentGuessContentFlag">
        <el-form-item label="赛事竞猜说明">
          <el-input class="content"
                    type="textarea"
                    placeholder="请输入赛事竞猜说明"
                    v-model="tournamentGuessInfo.content"
                    maxlength="80"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    :show-word-limit="showWordLimit"></el-input>
        </el-form-item>
        <el-form-item label="初始显示积分">
          <el-input-number v-model="tournamentGuessInfo.baseIntegral"
                           :min="0"
                           :step="100"
                           step-strictly></el-input-number>
          <span style="margin-left: 10px;">分</span>
        </el-form-item>
        <el-form-item label="平台抽成比例">
          <el-input-number v-model="tournamentGuessInfo.platformPercent"
                           :min="0"
                           :max="100"
                           type="number"
                           :controls="false"></el-input-number>
          <span style="margin-left: 10px;">%</span>
        </el-form-item>
      </template>
      <el-form-item label="是否显示参与人数">
        <!--<el-input v-model="msgInfo.state" el-input>-->
        <el-switch v-model="msgInfo.showParticipant"></el-switch>
      </el-form-item>
      <el-form-item label="初始参与人数">
        <el-input v-model="msgInfo.participantNum"></el-input>
      </el-form-item>
      <!-- 新添 -->
      <template v-if="!doll">
        <el-form-item label="是否显示返回俱乐部">
          <el-switch v-model="showBackClub"></el-switch>
        </el-form-item>
        <template v-if="showBackClub">
          <el-form-item label="跳转图片"
                        class="img-label">
            <div class="img-box l">
              <input id="wap-file"
                     class="imgInput"
                     type="file"
                     ref="wap_file"
                     name="wapSkipImage" />
            </div>
            <div class="img-box l">
              <input id="pc-file"
                     class="imgInput"
                     type="file"
                     ref="pc_file"
                     name="pcSkipImage" />
            </div>
          </el-form-item>
          <el-form-item label="跳转链接"
                        prop="skipUrl">
            <el-input v-model.trim="msgInfo.skipUrl"
                      placeholder="http://或https://开头的链接"></el-input>
          </el-form-item>
        </template>
      </template>
      <el-form-item class="is-required"
                    label="活动时间">
        <el-date-picker style="width: 376px"
                        v-model="msgInfoDate"
                        type="daterange"
                        range-separator="至"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="renderMsgDate"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="msgInfo.state"
                   placeholder="请选择状态">
          <el-option label="未开始"
                     value="0">
          </el-option>
          <el-option label="进行中"
                     value="1">
          </el-option>
          <el-option label="已结束"
                     value="2">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注"
                    prop="remark">
        <el-input v-model="msgInfo.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="pan-btn green-btn sm-btn"
                   size="small"
                   @click="saveMsgHandle">保存
        </el-button>
      </el-form-item>
    </el-form>
    <div class="phone"
         v-if="flag"></div>
    <section class="contentdo"
             v-if="flag">
      <div class="conText">
        <div class="deng">
          <div class="top">
            <img src="../../../assets/images/titleBg.png"
                 class="titleBg" />
            <img src="../../../assets/images/clip-rod.png"
                 class="clip" />
            <img src="../../../assets/images/clipOpen.png"
                 class="clipOpen" />
          </div>
          <div class="border">
            <div class="littleBg">
              <img src="../../../assets/images/rules.png"
                   class="rules" />
              <img src="../../../assets/images/my-record.png"
                   class="record" />
              <div class="muchDoll">
                <img src="../../../assets/images/tipsImg.png"
                     class="tipsImg1" />
                <img src="../../../assets/images/tipsImg.png"
                     class="tipsImg2" />
                <img src="../../../assets/images/tipsImg.png"
                     class="tipsImg3" />
              </div>
              <div class="twoDoll">
                <img src="../../../assets/images/tipsImg.png"
                     class="twoImg1" />
                <img src="../../../assets/images/tipsImg.png"
                     class="twoImg2" />
              </div>
            </div>
          </div>
        </div>
        <div class="bot">
          <img src="../../../assets/images/default.png"
               class="default" />
          <img src="../../../assets/images/select.png"
               class="select" />
          <img src="../../../assets/images/startGameBtn.png"
               class="start" />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import request from '@/utils/request'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'msgEdit',
  props: ['n', 'json'],
  data() {
    return {
      doll: false,
      flag: false,
      msgInfoStatus: null,
      msgInfoDate: '',
      questionnaireContentFlag: false,
      guessContentFlag: false,
      tournamentGuessContentFlag: false,
      showWordLimit: true,
      showBackClub: false,
      /* 信息编辑*/
      msgInfo: {
        title: '',
        description: '',
        participantNum: '',
        showParticipant: true,
        endTime: '',
        beginTime: '',
        state: '0',
        name: '',
        identifier: '',
        prizeState: '',
        advancedSetting: '',
        skipUrl: ''
      },
      msgInfoRules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        skipUrl: [
          { required: true, message: '请填写跳转俱乐部路径', trigger: 'blur' },
          { type: 'url', message: '请输入正确的路径', trigger: 'blur' }
        ]
      },
      labelWidth: '150px',
      editorOption: {
        placeholder: 'Hello World'
      },
      id: '',
      skipImage: {
        pc: '',
        wap: ''
      }, guessInfo: {
        content: '',
        baseIntegral: '',
        platformPercent: ''
      },
      tournamentGuessInfo: {
        content: '',
        baseIntegral: '',
        platformPercent: ''
      }
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(function() {
      this.doll = this.json.templateMark === 'prizeclaw' ? 1 : 0
      if (this.json.templateMark !== undefined) {
        const templateType = this.json.templateMark.toLowerCase()
        if (templateType === 'questionnaire') {
          this.questionnaireContentFlag = !this.questionnaireContentFlag
        } else if (templateType === 'guess') {
          this.guessContentFlag = !this.guessContentFlag
        } else if (templateType === 'tournamentguess') {
          this.tournamentGuessContentFlag = !this.tournamentGuessContentFlag
        }
      }
      if (this.json.activityId !== undefined && this.json.pageModel === 'msgEdit' && this.json.editFlag) {
        this.getMsgInfo()
      }
      if (this.json.templateMark === 'prizeclaw') {
        this.getImage()
      }
    })
  },
  components: {
    quillEditor
  },
  methods: {
    showChange(event) {
    },
    getImage() {
      const _this = this
      console.log()
      if (this.json.editFlag) {
        request({
          url: '/activityConsole/activity/info/getImage/' + _this.json.activityId,
          method: 'get'
        }).then(res => {
          if (res.status === '200') {
            $('.conText').css('background-image', 'url(/ActivityWeb/static/' + res.data.bigBackgroundImage + ')')
            $('.deng').css('background-image', 'url(/ActivityWeb/static/' + res.data.horseRaceLampImage + ')')
            $('.border').css('background-image', 'url(/ActivityWeb/static/' + res.data.FrameImage + ')')
            $('.littleBg').css('background-image', 'url(/ActivityWeb/static/' + res.data.littleBackgroundImage + ')')
            $('.titleBg').attr('src', '/ActivityWeb/static/' + res.data.DismantlingDollsImage)
            $('.rules').attr('src', '/ActivityWeb/static/' + res.data.activityRuleImage)
            $('.record').attr('src', '/ActivityWeb/static/' + res.data.participationRecordImage)
            $('.default').attr('src', '/ActivityWeb/static/' + res.data.default)
            $('.select').attr('src', '/ActivityWeb/static/' + res.data.advancedButtonImage)
            $('.start').attr('src', '/ActivityWeb/static/' + res.data.startButtonImage)
            var dollStyle = res.data.dollStyles.split(',')
            $('.tipsImg1').attr('src', '/ActivityWeb/static/' + dollStyle[0])
            $('.tipsImg2').attr('src', '/ActivityWeb/static/' + dollStyle[1])
            $('.tipsImg3').attr('src', '/ActivityWeb/static/' + dollStyle[2])
            $('.twoImg1').attr('src', '/ActivityWeb/static/' + dollStyle[3])
            $('.twoImg2').attr('src', '/ActivityWeb/static/' + dollStyle[4])
          } else {
            _this.flag = false
            _this.$message({
              type: 'error',
              message: '图片加载失败'
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    getMsgInfo() {
      /* 获取编辑信息*/
      const _this = this
      request({
        url: '/activityConsole/activity/info/id/' + _this.json.activityId,
        method: 'get'
      }).then(res => {
        if (this.json.templateMark === 'prizeclaw') {
          this.flag = res.foregroundLink !== '' ? 1 : 0
        }
        const dataObj = res
        const state = dataObj.state.toString()
        const createTime = parseTime(dataObj.createTime)
        if (_this.guessContentFlag) {
          _this.guessInfo = JSON.parse(dataObj.advancedSetting)
        } else if (_this.tournamentGuessContentFlag) {
          _this.tournamentGuessInfo = JSON.parse(dataObj.advancedSetting)
        }
        _this.showBackClub = !!dataObj.skipUrl
        _this.msgInfoDate = [parseTime(dataObj.beginTime), parseTime(dataObj.endTime)]
        _this.msgInfo = dataObj
        if (dataObj.skipImage) {
          _this.skipImage = JSON.parse(dataObj.skipImage)
        }
        _this.msgInfo.state = state
        _this.msgInfo.createTime = createTime
        _this.renderMsgDate()
      }).catch(err => {
        console.log(err)
      })
    },
    saveMsgHandle() {
      const _this = this
      const formData = new FormData(document.querySelector('#msgInfo'))
      const url = this.json.editFlag ? '/activityConsole/activity/info' : '/activityConsole/activity/info/templateId/' + _this.json.templateId
      /* 保存信息编辑*/
      if (_this.guessContentFlag) {
        if (!_this.guessInfo.baseIntegral) {
          _this.$message({
            type: 'error',
            message: '请填写初始基础分'
          })
          return false
        }
        _this.msgInfo.advancedSetting = JSON.stringify(_this.guessInfo)
      } else if (_this.tournamentGuessContentFlag) {
        if (!_this.tournamentGuessInfo.baseIntegral) {
          _this.$message({
            type: 'error',
            message: '请填写初始基础分'
          })
          return false
        }
        _this.msgInfo.advancedSetting = JSON.stringify(_this.tournamentGuessInfo)
      }
      if (_this.showBackClub) {
        /* 开启返回俱乐部功能--判断不能为单一条件*/
        if (_this.msgInfo.skipUrl) {
          if (!_this.skipImage.wap) {
            if (_this.$refs.wap_file.value === '') {
              _this.$message({
                type: 'error',
                message: '请上传wap端俱乐部图片'
              })
              return false
            }
          }
          if (!_this.skipImage.pc) {
            if (_this.$refs.pc_file.value === '') {
              _this.$message({
                type: 'error',
                message: '请上传pc端俱乐部图片'
              })
              return false
            }
          }
        }
        if (!_this.msgInfo.skipUrl || _this.msgInfo.skipUrl === '') {
          this.$message({
            type: 'error',
            message: '请填写跳转俱乐部路径'
          })
          return false
        }
      } else {
        _this.msgInfo.skipUrl = ''
      }
      if (_this.msgInfo.beginTime === '' || _this.msgInfo.endTime === '') {
        _this.$message({
          type: 'error',
          message: '验证不通过， 日期必选'
        })
        return false
      }
      const params = _this.msgInfo

      this.$refs.msgInfo.validate(valid => {
        if (valid) {
          request({
            url: url,
            method: 'post',
            data: formData,
            params: params
          }).then(res => {
            if (res.status == 200) {
              _this.$emit('listenMsgEdit', {
                hideSetFlag: true,
                activityId: res.data.id,
                pageModel: 'condtion'
              })
            }
            _this.$message({
              type: 'success',
              message: res.description
            })
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    renderMsgDate() {
      this.msgInfo.beginTime = this.msgInfoDate[0]
      this.msgInfo.endTime = this.msgInfoDate[1]
    }
  }
}
</script>
<style scoped>
.content {
  width: 600px;
}

.phone {
  margin: 2.5vh 5vw;
  width: 30%;
  height: 100vh;
  overflow: hidden;
}

.contentdo {
  position: fixed;
  width: 360px;
  height: 80%;
  bottom: 0;
  top: 100px;
  right: 6vw;
  background: url("../../../assets/images/journal.png") no-repeat top center;
  background-size: 100% 100%;
}

.conText {
  width: 87%;
  margin: 15% auto 8%;
  height: 83%;
  background: url("../../../assets/images/lockLogin.png") no-repeat top center;
  background-size: 100% 100%;
  /*overflow-y: scroll;*/
}

.deng {
  width: 100%;
  margin: 15% auto 8%;
  height: 83%;
  background: url("../../../assets/images/dollFrameBg.png") no-repeat top center;
  background-size: 100% 100%;
  overflow: hidden;
}

.img-label .img-box {
  margin: 0 15px;
}

.img-label .img-box .imgInput {
  position: relative;
  border: 0;
  outline: none;
}

.img-label .img-box .imgInput::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 75px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #2b94ff;
  color: #fff;
  border-radius: 2px;
}

.img-label .img-box:first-child .imgInput::after {
  content: "wap图片";
}

.img-label .img-box:last-child .imgInput::after {
  content: "pc图片";
}

.titleBg {
  position: absolute;
  width: 38%;
  left: 29%;
}

.muchDoll {
  position: absolute;
  top: 55%;
}

.tipsImg1,
.tipsImg2,
.tipsImg3 {
  width: 21%;
  margin: 3%;
}

.twoDoll {
  position: absolute;
  top: 48%;
  left: 25%;
}

.twoImg1,
.twoImg2 {
  width: 24%;
  margin: 0 7%;
}

.clip {
  width: 3%;
  height: 10%;
  position: absolute;
  left: 45%;
  top: 15.7%;
}

.clipOpen {
  position: absolute;
  width: 15%;
  left: 39%;
  top: 25%;
}

.border {
  width: 88%;
  margin: 8% auto 8%;
  height: 85%;
  background: url("../../../assets/images/border.png") no-repeat top center;
  background-size: 100% 100%;
  overflow: hidden;
}

.littleBg {
  width: 95%;
  margin: 2% auto 0;
  height: 96.5%;
  border-radius: 5%;
  background: url("../../../assets/images/backplane.jpg") no-repeat top center;
  background-size: 100% 100%;
}

.rules,
.record {
  width: 10%;
  float: right;
  margin-right: 3%;
  margin-top: 3%;
}

.bot {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.default {
  width: 20%;
  margin: 3%;
}

.select {
  width: 20%;
}

.start {
  width: 40%;
  margin: 0 3%;
}

::-webkit-scrollbar {
  display: none;
}
</style>
